<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../dist/flipping.js"></script>
    <style>
      @import url('https://fonts.googleapis.com/css?family=PT+Serif');
      [data-state='garnet'] .gemstone:not(#garnet) {
        display: none;
      }

      [data-state='amethyst'] .gemstone:not(#amethyst) {
        display: none;
      }

      [data-state='aquamarine'] .gemstone:not(#aquamarine) {
        display: none;
      }

      [data-state='diamond'] .gemstone:not(#diamond) {
        display: none;
      }

      [data-state='emerald'] .gemstone:not(#emerald) {
        display: none;
      }

      [data-state='alexandrite'] .gemstone:not(#alexandrite) {
        display: none;
      }

      [data-state='ruby'] .gemstone:not(#ruby) {
        display: none;
      }

      [data-state='peridot'] .gemstone:not(#peridot) {
        display: none;
      }

      [data-state='sapphire'] .gemstone:not(#sapphire) {
        display: none;
      }

      [data-state='tourmaline'] .gemstone:not(#tourmaline) {
        display: none;
      }

      [data-state='topaz'] .gemstone:not(#topaz) {
        display: none;
      }

      [data-state='turquoise'] .gemstone:not(#turquoise) {
        display: none;
      }

      #stone {
        margin-top: 5vh;
        height: 24.14214vmin;
        width: 24.14214vmin;
      }

      #stone .cut {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      #stone > .cut {
        -webkit-transition-delay: 70ms;
        transition-delay: 70ms;
      }

      #stone > .cut > .cut {
        -webkit-transition-delay: 140ms;
        transition-delay: 140ms;
      }

      #stone > .cut > .cut > .cut {
        -webkit-transition-delay: 210ms;
        transition-delay: 210ms;
      }

      #stone > .cut > .cut > .cut > .cut {
        -webkit-transition-delay: 280ms;
        transition-delay: 280ms;
      }

      .cut {
        width: 10vmin;
        height: 100%;
        left: calc(50% - 5vmin);
        background-color: var(--color);
        mix-blend-mode: screen;
      }

      .cut,
      .cut:before,
      .cut:after {
        -webkit-transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);
        transition: all 0.6s cubic-bezier(0.5, 0, 0.5, 1);
      }

      .cut:before,
      .cut:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
      }

      .cut:before {
        box-shadow: 0 0 10vmin var(--color);
        z-index: -1;
        opacity: 0.2;
      }

      .cut:after {
        border: 2px solid rgba(255, 255, 255, 0.5);
        mix-blend-mode: soft-light;
      }

      span {
        display: inline-block;
      }

      .month {
        font-size: 3vmin;
        letter-spacing: 1vmin;
        text-transform: uppercase;
        opacity: 0.5;
      }

      .gem {
        font-size: 10vmin;
        font-family: PT Serif, serif;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #191919;
        color: white;
      }

      body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
      }

      *,
      *:before,
      *:after {
        box-sizing: border-box;
        position: relative;
      }

      [data-flip-state='pre-enter'] {
        transform: scale(0);
      }

      [data-flip-state='enter'] {
        transition: transform 0.6s ease;
        transform: scale(1);
      }
    </style>
  </head>

  <body>
    <div id="gemstones" data-state="sapphire"></div>
    <div id="stone">
      <div class="cut">
        <div class="cut">
          <div class="cut"><div class="cut"></div></div>
        </div>
      </div>
    </div>
    <script>
      const gemstones = {
        garnet: 'january',
        amethyst: 'february',
        aquamarine: 'march',
        diamond: 'april',
        emerald: 'may',
        alexandrite: 'june',
        ruby: 'july',
        peridot: 'august',
        sapphire: 'september',
        tourmaline: 'october',
        topaz: 'november',
        turquoise: 'december'
      };
      const colors = {
        garnet: '#8B0206',
        amethyst: '#694F91',
        aquamarine: '#7FC7F3',
        diamond: '#F1F9FF',
        emerald: '#04A24F',
        alexandrite: '#5D9094',
        ruby: '#F70004',
        peridot: '#B1E347',
        sapphire: '#2345B9',
        tourmaline: '#FC5191',
        topaz: '#F98603',
        turquoise: '#4DF5FF'
      };

      const gemstonesElm = document.getElementById('gemstones');
      const stoneElm = document.getElementById('stone');

      const letter = prefix => char =>
        `<span data-flip-key="${prefix}-${char}">${char}</span>`;

      function mapLetters(word, prefix) {
        const seen = {};

        return [...word].map(char => {
          let suffix = '';
          if (seen[char] !== undefined) {
            ++seen[char];
            return `<span data-flip-key="${prefix}-${char}-${
              seen[char]
            }">${char}</span>`;
          } else {
            seen[char] = 0;
            return `<span data-flip-key="${prefix}-${char}">${char}</span>`;
          }
        });
      }

      const gemstonesHTML = Object.keys(gemstones)
        .map(gemstone => {
          const month = gemstones[gemstone];

          return `
      <div class="gemstone" id="${gemstone}">
        <div class="month">
          ${mapLetters(month, 'month').join('')}
        </div>
        <div class="gem">
          ${mapLetters(gemstone, 'gem').join('')}
        </div>
      </div>
    `;
        })
        .join('\n');

      gemstonesElm.innerHTML = gemstonesHTML;

      // state machine
      function cycle(states, action) {
        const statesMap = {};

        states.forEach((state, i) => {
          statesMap[state] = {
            [action]: states[i + 1] || states[0]
          };
        });

        return statesMap;
      }

      function transition(state, action) {
        return machine[state][action];
      }

      const machine = cycle(Object.keys(gemstones), 'CLICK');
      let currentState = 'sapphire';

      // FLIPPING!
      const flipping = Flipping.create();

      flipping.applyDefaultStyles();

      // flipping.read();

      function update(state) {
        gemstonesElm.setAttribute('data-state', state);
        stoneElm.style.setProperty('--color', colors[state]);
      }

      document.body.addEventListener(
        'click',
        flipping.wrap(() => {
          currentState = transition(currentState, 'CLICK');
          update(currentState);
        })
      );

      update(currentState);
    </script>
  </body>
</html>
